<template>
  <div class="home">
    <ScreenAdapter>
      <screenfull ref="screenfull" class="screenfull" id="screenfull" />
      <div class="top_section">
        <img class="top_img" :src="require('/public/images/top_bg.png')" alt="">
        <img class="top_line_img" :src="require('/public/images/top_line.png')" alt="">
        <div class="top_title">众茶国际平台交易数据</div>
        <div class="top_time">
          <img class="time_img" :src="require('/public/images/time_icon.png')" alt="">
          <div class="time">{{ date }}</div>
        </div>
      </div>
      <div class="main_section">
        <div class="left_item_section">
          <div class="left_chart_section">
            <div class="first_row_bg">
              <Corner class="first_row_item_bg">
                <div class="item_title">平台商户总数</div>
                <div class="item_amount">{{ totalData.pthy || 0 }}</div>
              </Corner>
              <Corner class="first_row_item_bg">
                <div class="item_title">平台活跃商户总数</div>
                <div class="item_amount">{{ totalData.zhyhy || 0 }}</div>
              </Corner>
            </div>
            <div class="second_row_bg">
              <Corner class="second_row_item_bg">
                <div class="item_title">月活跃商户</div>
                <div class="item_amount">{{ totalData.yhyhy + 500 || 0 }}</div>
              </Corner>
              <Corner class="second_row_item_bg">
                <div class="item_title">平台供应商</div>
                <div class="item_amount">{{ totalData.ptgys || 0 }}</div>
              </Corner>
              <Corner class="second_row_item_bg">
                <div class="item_title">平台采购商</div>
                <div class="item_amount">{{ totalData.ptcgs || 0 }}</div>
              </Corner>
            </div>
          </div>
          <div class="left_chart_section">
            <div class="left_title_bg">
              <img class="bar_title_icon" :src="require('/public/images/bar_title_icon.png')" alt="">
              <div class="bar_title">品类销售占比</div>
            </div>
            <div class="left_pie_chart_bg">
              <PieChartData :dataList="pieChartDataList"/>
            </div>
          </div>
          <div class="left_chart_section">
            <div class="left_title_bg">
              <img class="bar_title_icon" :src="require('/public/images/bar_title_icon.png')" alt="">
              <div class="bar_title">月交易次数</div>
            </div>
            <div class="left_line_chart_bg">
              <LineChartData :dataList="lineChartDataList"/>
            </div>
          </div>
        </div>
        <div class="main_item_section">
          <div class="amount_bg">
            <img class="amount_img_bg" :src="require('/public/images/amount_bg.png')" alt="">
            <div class="amount_title">平台交易额</div>
            <CountTo class="amount_price" :startVal='oldTotalAmount' :endVal='newTotalAmount' :duration='3000' />
          </div>
          <div class="map_bg">
            <MapChartData/>
          </div>
        </div>
        <div class="right_item_section">
          <div class="bar_section">
            <div class="right_title_bg">
              <img class="bar_title_icon" :src="require('/public/images/bar_title_icon.png')" alt="">
              <div class="bar_title">交易品类重量(公斤)</div>
            </div>
            <div class="bar_chart_bg">
              <XBarChartData :times="times" :dataList="xBarChartDataList"/>
            </div>
          </div>
          <div class="bar_section">
            <div class="right_title_bg">
              <img class="bar_title_icon" :src="require('/public/images/bar_title_icon.png')" alt="">
              <div class="bar_title">品类交易额(万元)</div>
            </div>
            <div class="bar_chart_bg">
              <BarChartData :times="times" :dataList="barChartDataList"/>
            </div>
          </div>
        </div>
      </div>
    </ScreenAdapter>

    <!-- <CommonView v-show="step == 2" ref="common2" type="2" :videoList = "['https://image.utea88.com/statics/blessing/1.mp4?t=1']" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 3" ref="common3" type="1" :bannerList = "[bannerList[0]]" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 4" ref="common4" type="2" :videoList = "['https://image.utea88.com/statics/blessing/2.mp4?t=1']" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 5" ref="common5" type="1" :bannerList = "[bannerList[1]]" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 6" ref="common6" type="2" :videoList = "['https://image.utea88.com/statics/blessing/3.mp4?t=1']" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 7" ref="common7" type="1" :bannerList = "tempList1" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 8" ref="common8" type="2" :videoList = "['https://image.utea88.com/statics/blessing/4.mp4?t=1']" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 9" ref="common9" type="1" :bannerList = "tempList2" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 10" ref="common10" type="2" :videoList = "['https://image.utea88.com/statics/blessing/5.mp4?t=1']" @commonEnd="handleCommonEnd"/> -->


    <CommonView v-show="step == 2" ref="common2" type="2" :videoList = "[require('@/assets/video/1.mp4')]" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 3" ref="common3" type="1" :bannerList = "[bannerList[0]]" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 4" ref="common4" type="2" :videoList = "[require('@/assets/video/2.mp4')]" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 5" ref="common5" type="1" :bannerList = "[bannerList[1]]" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 6" ref="common6" type="2" :videoList = "[require('@/assets/video/3.mp4')]" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 7" ref="common7" type="1" :bannerList = "tempList1" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 8" ref="common8" type="2" :videoList = "[require('@/assets/video/4.mp4')]" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 9" ref="common9" type="1" :bannerList = "tempList2" @commonEnd="handleCommonEnd"/>
    <CommonView v-show="step == 10" ref="common10" type="2" :videoList = "[require('@/assets/video/5.mp4')]" @commonEnd="handleCommonEnd"/>
  </div>
</template>

<script>
import { dataCenterGetReport, bannerPageByQo } from "@/api/data";
import PieChartData from './components/newPieChartData.vue'
import LineChartData from './components/newLineChartData.vue'
import XBarChartData from './components/newXBarChartData.vue'
import BarChartData from './components/newBarChartData.vue'
import MapChartData from './components/MapChartData.vue'
import Corner from './components/newCorner'
import CountTo from 'vue-count-to'
import Screenfull from '@/components/Screenfull'
import ScreenAdapter from '@/components/ScreenAdapter/newIndex.vue'
import Banner from '@/views/banner/index.vue'
import Player from '@/views/player/index.vue'
import CommonView from '@/components/CommonView'

export default {
  name: 'HomeView',
  components: {
    Corner,
    PieChartData,
    LineChartData,
    XBarChartData,
    BarChartData,
    MapChartData,
    CountTo,
    Screenfull,
    ScreenAdapter,
    Banner,
    Player,
    CommonView
  },
  data() {
    return {
      date: '',
      totalData: {},
      pieChartDataList:[],
      procurementData: [],
      times:0,
      lineChartDataList: [],
      barChartDataList: [],
      xBarChartDataList: [],
      totalAmount:0,
      oldTotalAmount:0,
      newTotalAmount:0,
      temp:0,
      timer: '',
      bannerList: [],
      tempList1: [],
      tempList2: [],
      step: 1,
    }
  },
  created() {
    this.step = 1
    let that = this
    setInterval(() => {
      that.updateTime()
    }, 1000);

    this.handleShowDataView()
  },
  mounted() {
    
    
  },
  watch: {
    
  },
  methods: {
    updateData() {
      this.getData(1).then((res) => {
        this.totalData = res && res[0]
        this.totalAmount = Number((this.totalData.zje).toFixed(0)) + 23000000

        // this.temp = this.temp + 100
        // this.totalAmount = this.totalAmount + this.temp

        if (this.newTotalAmount != this.totalAmount) {
          this.oldTotalAmount = this.newTotalAmount
          this.newTotalAmount = this.totalAmount
        }
        this.handleData()
      })

      this.getData(5).then((res) => {
        this.barChartDataList = res
        this.handleData()
      })

      this.getData(5).then((res) => {
        this.pieChartDataList = res
      })
      
      this.getData(3).then(res => {
        this.lineChartDataList = res
      })
      .catch((err) => {
        console.log(err)
      })

      this.getData(4).then((res) => {
        this.xBarChartDataList = res
      })
    },
    getData(type) {
      return new Promise((resolve, reject) => {
        dataCenterGetReport(type).then((res) => {
          resolve(res);
        })
        .catch(err => {
          reject(err);
        });
      });
    },
    handleData() {
      if (this.barChartDataList.length > 0 && this.totalData.zje) {
        var result = 0
        for (let index = 0; index < this.barChartDataList.length; index++) {
          const element = this.barChartDataList[index].amount;
          result = result + element
        }
        let amount = this.totalData.zje + 23000000
        this.times = parseInt(amount / (result * 10000))
        // console.log(888, this.times)
      }
    },
    updateTime() {
      var dt = new Date();
      var year = dt.getFullYear();
      var month = dt.getMonth() + 1;
      var day = dt.getDate();
      var hour = dt.getHours(); //获取时
      var minute = dt.getMinutes(); //获取分
      var second = dt.getSeconds(); //获取秒
      this.date = "当前时间：" 
        + year+'年'+(month<10?'0'+month:month) 
        + '月'+(day<10?'0'+day:day) 
        +'日 '+(hour<10?'0'+hour:hour) 
        +':'+(minute<10?'0'+minute:minute) 
        +':'+(second<10?'0'+second:second)
    },
    handleShowPlayer() {
      this.step = 1
      clearTimeout(this.timer);
      this.$refs.player.restart()
    },
    handleAllVideoEnd() {
      this.handleShowDataView()
    },
    handleShowDataView() {
      this.step = 1
      clearTimeout(this.timer);

      this.updateData()
      this.updateBanner()

      let that = this
      this.timer = setTimeout(function () {
        that.handleCommonEnd()
      }, 30000);
    },
    updateBanner() {
      bannerPageByQo({
        pageNo: 1,
        pageSize: 999,
        code: 'adRoll'
      }).then(res => {
        this.bannerList = res.list || []
        this.tempList1 = [res.list[2], res.list[3], res.list[4], res.list[5]]
        this.tempList2 = [res.list[6], res.list[7]]
      })
      .catch((err) => {
        console.log(err)
      })
    },
    handleCommonEnd() {
      if (this.step == 10) {
        this.handleShowDataView()
      } else {
        this.step ++
        this.$refs[`common${this.step}`].commonStart()
      }
    },
  }
}
</script>

<style lang='scss' scoped>
  .home {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../../../public/images/new_bg.png') no-repeat;
    background-size: cover;
  }

  .screenfull {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: rgba($color: red, $alpha: 0);
    z-index: 100;
  }

  .banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .top_section {
    position: relative;
    width: 100%;
    height: 150px;

    .top_img {
      width: 100%;
      height: 125px;
    }

    .top_line_img {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 6px;
    }

    .top_title {
      position: absolute;
      top: 23px;
      left: 50%;
      // width: 600px;
      height: 76px;
      opacity: 1;
      font-size: 52px;
      font-weight: 700;
      letter-spacing: 5px;
      line-height: 76px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      vertical-align: top;
      transform: translateX(-50%);
    }

    .top_time {
      position: absolute;
      top: 36px;
      right: 20px;
      height: 25px;
      display: flex;

      .time_img {
        width: 25px;
        height: 25px;
      }

      .time {
        margin-left: 10px;
        height: 100%;
        opacity: 1;
        /** 文本1 */
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 25px;
        color: rgba(255, 255, 255, 1);
        text-align: right;
        vertical-align: top;
      }
    }
  }

  .main_section {
    position: absolute;
    top: 120px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;

    .left_item_section {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;

      .left_chart_section {
        flex: 1;
        position: relative;
        margin-top: 10px;
        width: 100%;
        background: url('../../../public/images/left_chart_bg.png') no-repeat;
        background-size:100% 100%;

        &:nth-child(1) {
          margin-top: 0;
        }

        .left_title_bg {
          position: absolute;
          top: 40px;
          left: 36px;
          height: 27px;
          display: flex;
          align-items: center;
          
          .bar_title_icon {
            width: 17px;
            height: 17px;
          }

          .bar_title {
            margin-left: 8px;
            height: 27px;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0px;
            line-height: 27px;
            color: rgba(255, 255, 255, 1);
            text-align: left;
            vertical-align: top;

          }
        }

        .left_pie_chart_bg {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }

        .left_line_chart_bg {
          position: absolute;
          top: 27px;
          left: 36px;
          right: 0;
          bottom: 0;
        }

        .first_row_bg {
          position: absolute;
          display: flex;
          top: 45px;
          left: 40px;
          width: calc(100% - 80px);
          height: 100px;

          .first_row_item_bg {
            flex: 1;
            height: 100%;

            &:nth-child(2) {
              margin-left: 25px;
            }
          }
        }

        .second_row_bg {
          position: absolute;
          display: flex;
          top: 165px;
          left: 40px;
          width: calc(100% - 80px);
          height: 100px;

          .second_row_item_bg {
            margin-left: 25px;
            flex: 1;
            height: 100%;

            &:nth-child(1) {
              margin-left: 0;
            }
          }
        }

        .item_title {
          position: absolute;
          top: 18px;
          left: 0;
          width: 100%;
          height: 24px;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 24px;
          color: rgba(29, 252, 255, 1);
          text-align: center;
          vertical-align: top;
        }

        .item_amount {
          position: absolute;
          top: 42px;
          left: 0;
          width: 100%;
          height: 53px;
          font-size: 36px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 53px;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          vertical-align: top;
        }
      }
    }

    .main_item_section {
      position: relative;
      margin: 0 10px 0 10px;
      width: 940px;
      height: 100%;

      .amount_bg {
        position: absolute;
        top: 80px;
        left: 50%;
        width: 662px;
        height: 172px;
        transform: translateX(-50%);

        .amount_img_bg {
          position: relative;
          width: 100%;
          height: auto;
        }

        .amount_title {
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          height: 58px;
          opacity: 1;
          font-size: 40px;
          font-weight: 700;
          letter-spacing: 5px;
          line-height: 58px;
          color: rgba(255, 235, 59, 1);
        }

        .amount_price {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 90px;
          opacity: 1;
          font-size: 90px;
          font-weight: 400;
          letter-spacing: 5px;
          line-height: 90px;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          vertical-align: top;
        }
      }

      .map_bg {
        position: absolute;
        top: 252px;
        left: 50%;
        bottom: 0;
        width: 100%;
        transform: translateX(-50%);
      }
    }

    .right_item_section {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;

      .bar_section {
        flex: 1;
        position: relative;
        width: 100%;
        // height: 465px;
        background: url('../../../public/images/right_chart_bg.png') no-repeat;
        background-size:100% 100%;

        &:nth-child(2) {
          margin-top: 10px;
        }

        .right_title_bg {
          position: absolute;
          top: 40px;
          left: 20px;
          height: 27px;
          display: flex;
          align-items: center;
          
          .bar_title_icon {
            width: 17px;
            height: 17px;
          }

          .bar_title {
            margin-left: 8px;
            height: 27px;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0px;
            line-height: 27px;
            color: rgba(255, 255, 255, 1);
            text-align: left;
            vertical-align: top;

          }
        }

        .bar_chart_bg {
          position: absolute;
          top: 22px;
          left: 0;
          right: 0;
          bottom: 0;

          &:nth-child(2) {
            top: 26px;
          }
        }
      }
    }
  }
  .head_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 734px;
    height: 462px;
  }
</style>
